<template>
  <el-dialog
    title="表格设置"
    v-model="dialogVisible"
    width="800px"
    append-to-body
  >
    <el-tabs v-model="activeTab">
      <!-- 表格基本设置 -->
      <el-tab-pane label="基本设置" name="basic">
        <el-form :model="tableConfig" label-width="120px" size="default">
          <el-form-item label="表格名称">
            <el-input v-model="tableConfig.label" placeholder="请输入表格名称" />
          </el-form-item>
          
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="X坐标 (mm)">
                <el-input-number v-model="tableConfig.position.x" :min="0" :max="500" :step="1" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="Y坐标 (mm)">
                <el-input-number v-model="tableConfig.position.y" :min="0" :max="500" :step="1" />
              </el-form-item>
            </el-col>
          </el-row>
          
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="行高 (mm)">
                <el-input-number v-model="tableConfig.rowHeight" :min="5" :max="30" :step="1" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="预览行数">
                <el-input-number v-model="tableConfig.rows" :min="1" :max="50" :step="1" />
              </el-form-item>
            </el-col>
          </el-row>
          
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="线条宽度 (px)">
                <el-input-number v-model="tableConfig.strokeWidth" :min="0.5" :max="3" :step="0.5" />
              </el-form-item>
            </el-col>
            <!-- <el-col :span="12">
              <el-form-item label="线条颜色">
                <el-color-picker v-model="tableConfig.strokeColor" />
              </el-form-item>
            </el-col> -->
          </el-row>
        </el-form>
      </el-tab-pane>
      
      <!-- 表格列配置 -->
      <el-tab-pane label="列设置" name="columns">
        <div class="table-config-tools">
          <div class="column-stats">
            已选 <b>{{ visibleColumnsCount }}</b>/{{ tableColumns.length }} 字段
            <span class="warning-text" v-if="visibleColumnsCount > 5">(建议最多选择5个字段)</span>
          </div>
          <div class="column-actions">
            <el-button v-throttle-click="2000" size="small" @click="toggleAllColumns">
              {{ allColumnsSelected ? '取消全选' : '全选' }}
            </el-button>
            <el-button v-throttle-click="2000" size="small" @click="selectFirstFiveColumns" :disabled="tableColumns.length <= 5">
              仅选前5个
            </el-button>
          </div>
        </div>
        
        <div class="table-config-container">
          <table class="custom-table">
            <thead>
              <tr>
                <th style="width: 60px;text-align: center;">#</th>
                <th>列名</th>
                <th style="width: 120px;">列宽 (mm)</th>
                <th style="width: 180px;text-align: center;">操作</th>
              </tr>
            </thead>
            <!-- 使用draggable替换原来的tbody -->
            <draggable 
              tag="tbody"
              v-model="tableColumns" 
              item-key="key"
              handle=".drag-row"
              ghost-class="ghost-row"
              animation="300"
              @end="onDragEnd"
            >
              <template #item="{element: column, index}">
                <tr class="drag-row">
                  <td align="center" class="drag-handle">
                    <div class="drag-handle-content">
                      <i class="el-icon-rank drag-icon"></i>
                      <span>{{ index + 1 }}</span>
                    </div>
                  </td>
                  <td>
                    <div style="display: flex; align-items: center; justify-content: space-between;">
                      <el-checkbox v-model="column.visible">{{ column.label }}</el-checkbox>
                      <el-button v-throttle-click="2000" 
                        type="primary" 
                        link
                        size="small"
                        @click="editColumnLabel(column)"
                        title="编辑列名"
                      >
                        <el-icon style="font-size: 18px;"><Edit /></el-icon>
                      </el-button>
                    </div>
                  </td>
                  <td align="center">
                    <el-input-number 
                      v-model="column.widthMM" 
                      :min="10" 
                      :max="100" 
                      :step="1"
                      size="small"
                      :disabled="!column.visible"
                    />
                  </td>
                  <td align="center">
                    <el-button v-throttle-click="2000"
                      :icon="ArrowUp"
                      :disabled="index === 0"
                      link
                      @click="moveUp(index)"
                    />
                    <el-button v-throttle-click="2000"
                      :icon="ArrowDown"
                      :disabled="index === tableColumns.length - 1"
                      link
                      @click="moveDown(index)"
                    />
                    <el-button v-throttle-click="2000"
                      :icon="Top"
                      :disabled="index === 0"
                      title="置顶"
                      link
                      @click="moveToTop(index)"
                    />
                    <el-button v-throttle-click="2000"
                      :icon="Bottom"
                      :disabled="index === tableColumns.length - 1"
                      title="置底"
                      link
                      @click="moveToBottom(index)"
                    />
                  </td>
                </tr>
              </template>
            </draggable>
          </table>
        </div>
      </el-tab-pane>
      
      <!-- 表格数据编辑 -->
      <el-tab-pane label="数据编辑" name="data">
        <div class="data-edit-container">
          <div v-if="tableData.length === 0" class="empty-data-tip">
            <el-empty description="暂无数据" :image-size="100">
              <el-button v-throttle-click="2000" type="primary" @click="addRow">添加数据</el-button>
            </el-empty>
          </div>
          
          <el-table v-else :data="tableData" border style="width: 100%" class="main-table">
            <el-table-column type="index" label="#" width="50" />
            <el-table-column 
              v-for="column in visibleColumns" 
              :key="column.key" 
              :prop="column.key" 
              :label="column.label"
              :width="calculateColumnWidth(column.widthMM)"
            >
              <template #default="scope">
                <el-input v-model="scope.row[column.key]" placeholder="请输入内容" />
              </template>
            </el-table-column>
            <el-table-column label="操作" width="100" fixed="right">
              <template #default="scope">
                <el-button v-throttle-click="2000" type="danger" link @click="removeRow(scope.$index)" :disabled="tableData.length <= 1">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          
          <div class="add-row-btn">
            <el-button v-throttle-click="2000" type="primary" @click="addRow">
              <el-icon><Plus /></el-icon> 添加行
            </el-button>
          </div>
        </div>
      </el-tab-pane>
      
      <!-- 表格预览 -->
      <el-tab-pane label="预览" name="preview">
        <div class="preview-container">
          <div 
            class="table-preview" 
            :style="{
              borderCollapse: 'collapse',
              borderLeft: `${tableConfig.strokeWidth}px solid ${tableConfig.strokeColor}`,
              borderTop: `${tableConfig.strokeWidth}px solid ${tableConfig.strokeColor}`,
              borderBottom: `${tableConfig.strokeWidth}px solid ${tableConfig.strokeColor}`
            }"
          >
            <!-- 表头 - 不再使用背景色 -->
            <div 
              class="preview-header" 
              :style="{
                display: 'flex',
                borderBottom: `${tableConfig.strokeWidth}px solid ${tableConfig.strokeColor}`
              }"
            >
              <div
                v-for="column in visibleColumns"
                :key="column.key"
                class="preview-header-cell"
                :style="{
                  width: `${column.widthMM}mm`,
                  padding: '8px',
                  borderRight: `${tableConfig.strokeWidth}px solid ${tableConfig.strokeColor}`,
                  fontWeight: 'bold',
                  textAlign: 'center'
                }"
              >
                {{ column.label }}
              </div>
            </div>
            
            <!-- 表格数据 -->
            <div class="preview-body">
              <div 
                v-for="(row, rowIndex) in previewData"
                :key="rowIndex"
                class="preview-row"
                :style="{
                  display: 'flex',
                  borderBottom: rowIndex < previewData.length - 1 ? `${tableConfig.strokeWidth}px solid ${tableConfig.strokeColor}` : 'none'
                }"
              >
                <div
                  v-for="column in visibleColumns"
                  :key="column.key"
                  class="preview-cell"
                  :style="{
                    width: `${column.widthMM}mm`,
                    padding: '8px',
                    borderRight: `${tableConfig.strokeWidth}px solid ${tableConfig.strokeColor}`,
                    height: `${tableConfig.rowHeight}mm`,
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center'
                  }"
                >
                  {{ row[column.key] || `${column.label} ${rowIndex + 1}` }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>

    <template #footer>
      <div class="dialog-footer">
        <el-button v-throttle-click="2000" @click="handleClose">取消</el-button>
        <el-button v-throttle-click="2000" type="primary" @click="handleConfirm">确定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, computed, watch, nextTick } from 'vue'
import { ArrowUp, ArrowDown, Plus, Top, Bottom, Edit } from '@element-plus/icons-vue'
import draggable from 'vuedraggable'
import { ElMessageBox } from 'element-plus'

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  initialConfig: {
    type: Object,
    default: () => ({})
  },
  pxPerMm: {
    type: Number,
    default: 3.78
  },
  useInitialData: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['update:visible', 'confirm'])

// 内部状态
const dialogVisible = ref(false)
const activeTab = ref('basic')
const tableColumns = ref([]) // 表格列配置
const tableData = ref([]) // 表格数据
const tableConfig = ref({
  key: 'table',
  label: '商品数据表',
  type: 'table',
  textTemplate: '', // 为了适配导入导出需要有个空字段
  position: { x: 20, y: 100 },
  style: { fontSize: 14, bold: false, color: "#000" },
  width: 0, // 会根据列宽自动计算
  height: 0, // 会根据行高自动计算
  rows: 5, // 默认5行数据
  rowHeight: 10, // 行高(mm)
  strokeColor: '#000000', // 线条颜色
  strokeWidth: 1 // 线条宽度
})

// 计算可见列（用于数据编辑和预览）
const visibleColumns = computed(() => {
  return tableColumns.value.filter(col => col.visible)
})

// 用于预览的示例数据
const previewData = computed(() => {
  // 如果有用户输入的数据，则使用用户数据
  if (tableData.value.length > 0) {
    return tableData.value.slice(0, 3); // 最多显示3行
  }
  
  // 否则生成示例数据
  const data = [];
  for (let i = 0; i < Math.min(3, tableConfig.value.rows); i++) {
    const row = {};
    visibleColumns.value.forEach(col => {
      row[col.key] = `${col.label} ${i + 1}`;
    });
    data.push(row);
  }
  return data;
})

// 添加标志变量，避免重复初始化
const isInitialized = ref(false);
// 添加一个变量，标记是否有回显数据
const hasEchoData = ref(false);

// 监听props
watch(() => props.visible, (val) => {
  dialogVisible.value = val
  if (val) {
    initData()
  }
})

// 监听内部状态
watch(() => dialogVisible.value, (val) => {
  emit('update:visible', val)
})

// 监听initialConfig，当配置发生重大变化时重置
watch(() => props.initialConfig, (newConfig, oldConfig) => {
  // 检查关键属性是否发生变化（例如key变化表示是不同表格）
  if (newConfig?.key !== oldConfig?.key) {
    console.log("表格配置key已变化，重置初始化状态");
    isInitialized.value = false;
    hasEchoData.value = !!newConfig && 
                        Object.keys(newConfig).length > 0 && 
                        props.useInitialData;
    
    // 如果对话框当前处于打开状态，则重新初始化
    if (dialogVisible.value) {
      nextTick(() => {
        initData();
      });
    }
  } else if (props.useInitialData && newConfig && Object.keys(newConfig).length > 0) {
    // 如果useInitialData为true且有新配置，标记为有回显数据
    hasEchoData.value = true;
    // 如果对话框当前处于打开状态，则重新初始化
    if (dialogVisible.value) {
      isInitialized.value = false; // 强制重新初始化
      nextTick(() => {
        initData();
      });
    }
  }
}, { deep: true });

// 计算表格总宽度
const calculateTotalWidth = () => {
  return visibleColumns.value
    .reduce((sum, col) => sum + (Number(col.widthMM) || 20), 0)
}

// 计算表格总高度
const calculateTotalHeight = () => {
  return tableConfig.value.rowHeight * (tableConfig.value.rows + 1) // +1 是表头
}

// 初始化数据
const initData = () => {
  console.log("初始化表格配置开始:", 
    "已初始化:", isInitialized.value, 
    "有回显数据:", hasEchoData.value, 
    "使用初始数据:", props.useInitialData);
    
  // 如果已经初始化过且不需要使用回显数据，不再重新加载
  if (isInitialized.value && tableColumns.value.length > 0 && !hasEchoData.value) {
    console.log("表格配置已初始化，跳过加载");
    return;
  }
  
  // 如果是回显数据且useInitialData为true，则强制使用初始配置
  if (hasEchoData.value && props.useInitialData) {
    console.log("使用回显数据进行初始化:", props.initialConfig);
  } else {
    console.log("使用默认配置进行初始化");
  }
  
  console.log("初始化表格配置:", props.initialConfig);
  console.log("当前pxPerMm比例:", props.pxPerMm);
  
  // 初始化列配置
  if (props.initialConfig.columns && props.initialConfig.columns.length) {
    // 深拷贝，避免直接修改props
    const columnsWithWidth = JSON.parse(JSON.stringify(props.initialConfig.columns))
      .filter(col => col) // 过滤掉undefined等无效值
      .map((col, index) => {
        // 确保每列都有宽度(mm)
        const widthMM = col.width ? col.width / props.pxPerMm : 20;
        console.log(`列 ${col.key} 宽度转换: ${col.width}px → ${widthMM}mm`);
        
        // 如果是回显数据，保留原始visible状态
        const isVisible = hasEchoData.value && props.useInitialData
          ? col.visible !== false  // 回显数据时保留原状态，默认为可见
          : index < 5;  // 非回显数据时，只有前5个字段默认可见
        
        return {
          ...col,
          // 将像素宽度转换回毫米或设置默认宽度
          widthMM: col.widthMM || widthMM,
          visible: isVisible
        };
      });
    
    // 如果没有可见列，则确保至少第一列可见
    const hasVisibleColumn = columnsWithWidth.some(col => col.visible);
    if (!hasVisibleColumn && columnsWithWidth.length > 0) {
      columnsWithWidth[0].visible = true;
    }
    
    tableColumns.value = columnsWithWidth;
  }
  
  // 初始化表格数据
  if (props.initialConfig.data && props.initialConfig.data.length) {
    tableData.value = JSON.parse(JSON.stringify(props.initialConfig.data));
  } else if (tableData.value.length === 0) {
    // 只有在没有数据时才创建空白行
    initEmptyData();
  }
  
  // 应用表格基本配置
  if (Object.keys(props.initialConfig).length) {
    tableConfig.value = {
      ...tableConfig.value,
      ...props.initialConfig,
      position: {
        x: props.initialConfig.position?.x || 20,
        y: props.initialConfig.position?.y || 100
      },
      style: {
        ...tableConfig.value.style,
        ...(props.initialConfig.style || {})
      }
    };
    
    // 更新表格宽高
    updateTableDimensions();
  }
  
  // 标记为已初始化
  isInitialized.value = true;
  // 处理完成后重置回显标记
  hasEchoData.value = false;
}

// 初始化空白数据
const initEmptyData = () => {
  tableData.value = [];
  // 默认至少创建一行空白数据
  const emptyRowCount = Math.max(1, Math.min(3, tableConfig.value.rows));
  
  for (let i = 0; i < emptyRowCount; i++) {
    addRow();
  }
}

// 更新表格尺寸
const updateTableDimensions = () => {
  tableConfig.value.width = calculateTotalWidth();
  tableConfig.value.height = calculateTotalHeight();
}

// 关闭对话框
const handleClose = () => {
  dialogVisible.value = false
}

// 确认配置
const handleConfirm = () => {
  // 更新表格宽高
  updateTableDimensions()
  
  // 准备最终的配置
  const finalConfig = {
    ...tableConfig.value,
    width: tableConfig.value.width,
    height: tableConfig.value.height,
    // 重新计算列配置，将widthMM转换为像素width
    columns: tableColumns.value.map(col => ({
      key: col.key,
      label: col.label,
      type: col.type,
      width: Number(col.widthMM) * props.pxPerMm, // 转回像素
      widthMM: Number(col.widthMM), // 保留毫米值
      visible: col.visible,
      height: col.height || tableConfig.value.rowHeight * props.pxPerMm // 如果没有高度，使用行高
    })),
    // 表格数据
    data: tableData.value
  }
  
  emit('confirm', finalConfig)
  handleClose()
}

// 上移
const moveUp = (index) => {
  if (index <= 0) return
  // 交换位置
  const temp = tableColumns.value[index]
  tableColumns.value[index] = tableColumns.value[index - 1]
  tableColumns.value[index - 1] = temp
  updateTableDimensions()
}

// 下移
const moveDown = (index) => {
  if (index >= tableColumns.value.length - 1) return
  // 交换位置
  const temp = tableColumns.value[index]
  tableColumns.value[index] = tableColumns.value[index + 1]
  tableColumns.value[index + 1] = temp
  updateTableDimensions()
}

// 置顶
const moveToTop = (index) => {
  if (index <= 0) return
  // 将当前元素提取出来
  const temp = tableColumns.value[index]
  // 删除当前位置的元素
  tableColumns.value.splice(index, 1)
  // 将元素插入到数组开头
  tableColumns.value.unshift(temp)
  updateTableDimensions()
}

// 置底
const moveToBottom = (index) => {
  if (index >= tableColumns.value.length - 1) return
  // 将当前元素提取出来
  const temp = tableColumns.value[index]
  // 删除当前位置的元素
  tableColumns.value.splice(index, 1)
  // 将元素添加到数组末尾
  tableColumns.value.push(temp)
  updateTableDimensions()
}

// 拖拽结束后的处理
const onDragEnd = () => {
  // 更新表格尺寸
  updateTableDimensions()
}

// 添加数据行
const addRow = () => {
  const newRow = {};
  // 确保使用所有列，而不仅仅是可见列，这样即使列隐藏后再显示也能保留数据
  tableColumns.value.forEach(col => {
    newRow[col.key] = ''; // 初始化为空字符串
  });
  tableData.value.push(newRow);
  
  // 自动切换到最后一页，确保用户能看到新添加的行
  nextTick(() => {
    const tableElement = document.querySelector('.data-edit-container .el-table__body');
    if (tableElement) {
      tableElement.scrollTop = tableElement.scrollHeight;
    }
  });
}

// 删除数据行
const removeRow = (index) => {
  // 确保至少保留一行数据
  if (tableData.value.length <= 1) {
    // 如果只剩一行，则清空内容而不是删除行
    const emptyRow = {};
    tableColumns.value.forEach(col => {
      emptyRow[col.key] = '';
    });
    tableData.value = [emptyRow];
  } else {
    // 否则删除指定行
    tableData.value.splice(index, 1);
  }
}

// 计算列宽度，将毫米转换为像素
const calculateColumnWidth = (widthMM) => {
  // 使用传入的pxPerMm比例进行计算，确保显示宽度与实际设计宽度一致
  // 添加适当的补偿值以考虑边框和内边距
  const width = widthMM * props.pxPerMm;
  console.log(`计算列宽: ${widthMM}mm * ${props.pxPerMm} = ${width}px`);
  return width + 'px';
}

// 计算可见列数量
const visibleColumnsCount = computed(() => {
  return visibleColumns.value.length;
})

// 全选所有列
const toggleAllColumns = () => {
  const newValue = !allColumnsSelected.value;
  tableColumns.value.forEach(col => {
    col.visible = newValue;
  })
  updateTableDimensions()
}

// 仅选前5个字段
const selectFirstFiveColumns = () => {
  tableColumns.value.forEach((col, index) => {
    col.visible = index < 5;
  })
  updateTableDimensions()
}

// 判断所有列是否都被选中
const allColumnsSelected = computed(() => {
  return tableColumns.value.every(col => col.visible);
})

// 列名编辑相关
const editColumnLabel = (column) => {
  ElMessageBox.prompt('', '编辑列名', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    inputValue: column.label,
    inputPattern: /\S+/,
    inputErrorMessage: '列名不能为空',
    inputPlaceholder: '请输入列名'
  }).then(({ value }) => {
    // 更新列名
    column.label = value;
  }).catch(() => {
    // 用户取消，不做任何操作
  });
}
</script>

<style lang="scss" scoped>
.table-config-container {
  max-height: 400px;
  overflow-y: auto;
  
  .custom-table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid #ebeef5;
    
    th {
      background-color: #f5f7fa;
      padding: 12px 8px;
      font-weight: 500;
      color: #606266;
      text-align: left;
      border-bottom: 1px solid #ebeef5;
    }
    
    td {
      padding: 12px 8px;
      border-bottom: 1px solid #ebeef5;
    }
    
    tr {
      &.drag-row {
        cursor: move;
        position: relative;
        
        &:hover {
          background-color: #f5f7fa;
        }
        
        /* 增加拖拽提示 */
        &:active {
          cursor: grabbing;
        }
      }

      &:hover td {
        background-color: #f5f7fa;
      }
    }
    
    .drag-handle {
      position: relative;
      z-index: 1;
      
      .drag-handle-content {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
        
        .drag-icon {
          color: #909399;
          margin-right: 5px;
          cursor: grab;
          
          &:active {
            cursor: grabbing;
          }
        }
        
        span {
          display: inline-block;
        }
      }
    }
    
    // 操作按钮区域不触发拖拽
    td:last-child {
      position: relative;
      z-index: 10;
      pointer-events: auto;
      
      .el-button {
        position: relative;
        z-index: 11;
        pointer-events: auto;
      }
    }
    
    // 编辑按钮不触发拖拽
    .el-button[title="编辑列名"] {
      position: relative;
      z-index: 10;
      pointer-events: auto;
    }
  }
  
  /* 拖拽时的样式 */
  :deep(.ghost-row) {
    opacity: 0.5;
    background: #e8f4ff !important;
    border: 1px dashed #409eff;
    
    td {
      background: transparent !important;
    }
  }
  
  :deep(.sortable-drag) {
    opacity: 0;
  }
}

.data-edit-container {
  margin-bottom: 20px;
  
  .empty-data-tip {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 30px 0;
  }
  
  .add-row-btn {
    margin-top: 15px;
    display: flex;
    justify-content: center;
  }
  .main-table {
    width: 100%;
    /* 确保固定列正确显示 */
    :deep(.el-table__fixed-right) {
      height: 100%;
      position: absolute;
      top: 0;
      right: 0;
      z-index: 10 !important;
      box-shadow: -5px 0 10px rgba(0, 0, 0, 0.12);
    }
  
    :deep(.el-table__fixed-right-patch) {
      position: absolute;
      top: 0;
      right: 0;
      background-color: #fff;
      z-index: 1 !important;
    }
  
    /* 修复操作列透视问题 */
    :deep(.el-table__fixed-right .el-table__fixed-body-wrapper) {
      background-color: #fff !important;
    }
  
    :deep(.el-table__fixed-right .el-table__cell) {
      background-color: #fff !important;
    }
  
    :deep(.el-table-fixed-column--right) {
      background-color: #fff !important;
      z-index: 1 !important;
    }
  
    :deep(.el-table-fixed-column--right.is-first-column) {
      background-color: #fff !important;
      z-index: 1 !important;
    }
  
    :deep(.el-table__fixed-right .cell) {
      background-color: #fff !important;
    }
  
    :deep(.el-table__fixed-right tr:hover .el-table__cell) {
      background-color: rgba(0, 0, 0, 0.04) !important;
    }
  
    :deep(.el-table__fixed-header-wrapper) {
      z-index: 12 !important;
    }
  }
}

.preview-container {
  padding: 20px;
  border: 1px dashed #dcdfe6;
  border-radius: 4px;
  overflow-x: auto;
  
  .table-preview {
    display: inline-flex;
    flex-direction: column;
  }
}

.dialog-footer {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.table-config-tools {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;

  .column-stats {
    font-size: 14px;
    font-weight: 500;
    color: #606266;

    .warning-text {
      color: #f56c6c;
      font-size: 12px;
      margin-left: 5px;
    }
  }

  .column-actions {
    display: flex;
    gap: 10px;
  }
}
</style> 